<template>
  <view>
    <u-navbar title="积分明细" title-color="#fff" back-icon-color="#fff" :background="background" :border-bottom="false">
    </u-navbar>

    <view class="num_box u-f-ajc u-f-column">
      <view>我的积分</view>
      <view class="f-w-700">{{consume_amount}}</view>
    </view>

    <view class="coupons-container">
      <view class="tab-list u-f-ac u-f-jsa">
        <view class="tab-item tab-active">积分收入</view>
        <view class="tab-item">积分之处</view>
      </view>

      <mescroll-body ref="mescrollRef" top="10" :down="down" @down="downCallback" @up="upCallback">
        <view class="coupon-item u-f-ac u-f-jsb" v-for="(coupon, couponIndex) in 3" :key="couponIndex">
          <view>
            <view class="u-f-ac">
              <view class="f-w-700 title">邀请</view>
              <view class="username">用户:165****2222</view>
            </view>
            <view class="time">2024-11-22</view>
          </view>
          <view class="f-w-700 nums">+1</view>
        </view>
      </mescroll-body>
    </view>


  </view>
</template>

<script>
  import * as API_Members from '@/api/members.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
  import uviewTabs from "@/components/uview-tabs/u-tabs.vue"
  export default {
    components: {
      uviewTabs
    },
    mixins: [MescrollMixin],
    data() {
      return {
        tabsList: [{
            name: '额度余额',
            value: 0
          },
          // {
          //   name: '门店专用券',
          //   value: 0
          // }
        ],
        tabsCurrent: 0,
        params: {
          page_no: 1,
          page_size: 10,
          asset: 7
        },
        finished: false,
        couponsList: [], //补贴额度列表
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        },

        consume_amount: 0,
        background: {
          background: 'rgba(0,0,0,0)',
          // background: 'url(../../../static/images/member/cart-bg.png) no-repeat',
          // backgroundSize: 'cover'
        },

      }
    },
    methods: {
      changeTabs(index) {
        this.tabsCurrent = index
        this.couponsList = []
        this.params.page_no = 1
        // this.params.asset = index + 1
        this.getCoupons()
      },
      //下拉刷新
      downCallback() {
        this.changeTabs(this.tabsCurrent)
      },
      //上拉加载
      upCallback(page) {
        this.params.page_no = page.num
        this.getCoupons()
      },
      //获取补贴额度列表
      async getCoupons() {
        let response = await API_Members.getListPoint(this.params)
        console.log(response)
        const {
          data
        } = response
        this.couponsList.push(...data)
        setTimeout(() => {
          this.mescroll.endBySize(data.length, response.data_total)
        }, 500)
        let res = await API_Members.memberInfo()
        // this.tabsList[0].value = res.info.consume_amount
        this.consume_amount = res.info.consume_amount
        // API_Members.getCoupons(this.params).then(response => {
        //   const {
        //     data
        //   } = response
        //   this.couponsList.push(...data)
        //   setTimeout(() => {
        //     this.mescroll.endBySize(data.length, response.data_total)
        //   }, 500)
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    width: 100%;
    background: url(/static/images/member/jifen-bg.png) no-repeat 0 0;
    background-size: 100% 500rpx;
    background-color: #f4f4f4;
    padding: 0 30rpx;
    box-sizing: border-box;
  }

  .num_box {
    padding: 50rpx 0 60rpx;
    color: #fff;

    >view:nth-of-type(1) {
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }

    >view:nth-of-type(2) {
      font-size: 60rpx;
    }
  }

  .coupons-container {
    background-color: #fff;
    border-radius: 20rpx;
    /deep/.u-empty {
      margin-top: 100rpx !important;
    }

  }

  .tab-list {
    .tab-item {
      color: #999;
      font-size: 32rpx;
      padding: 36rpx 0;
      border-bottom: 4px solid rgba(0, 0, 0, 0);
    }

    .tab-active {
      color: #ED752F;
      border-bottom: 4px solid #ED752F;
      font-weight: 700;
    }
  }
  .coupon-item {
    margin-top: 40rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    .title {
      font-size: 30rpx;
      margin-right: 10rpx;
    }
    .username {
      font-size: 26rpx;
      color: #666;
    }
    .time {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
    .nums {
      color: #ED752F;
      font-size: 36rpx;
    }
  }
</style>